    /* 全局样式重置与基础设置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      /* 基础字体设置 */
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
      /* 背景设置 */
      background: white; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      min-height: 100vh;
      /* 居中布局 */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      position: relative;
    }

    /* 背景遮罩层 - 增强文字可读性 */
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.25);
      z-index: -1;
    }

    /* 登录容器样式 */
    .login-container {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      display: flex;
      width: 100%;
      max-width: 900px;
      /* 容器悬停动画 */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* 容器悬停效果 */
    .login-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }

    /* 左侧图片区域 */
    .spongebob-image {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f7ff;
      overflow: hidden;
    }

    .spongebob-image img {
      max-width: 100%;
      height: 100%;
      object-fit: cover;
      /* 图片缩放动画 */
      transition: transform 0.6s ease;
    }

    /* 图片悬停效果 */
    .spongebob-image:hover img {
      transform: scale(1.05);
    }

    /* 右侧登录表单区域 */
    .login-box {
      padding: 50px 40px;
      width: 100%;
      max-width: 450px;
    }

    /* 登录标题 */
    h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 35px;
      font-size: 26px;
      font-weight: 600;
      position: relative;
    }

    /* 标题下方装饰线 */
    h2::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background-color: #3498db;
      margin: 12px auto 0;
      border-radius: 3px;
    }

    /* 表单组样式 */
    .form-group {
      margin-bottom: 22px;
    }

    /* 验证码特殊布局 */
    .form-group.verify-group {
      display: flex;
      gap: 12px;
    }

    /* 标签样式 */
    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-size: 14px;
      font-weight: 500;
    }

    /* 输入框样式 */
    input {
      width: 100%;
      padding: 13px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 15px;
      /* 输入框过渡效果 */
      transition: all 0.3s ease;
    }

    /* 验证码输入框宽度调整 */
    .verify-group input {
      flex: 1;
    }

    /* 输入框聚焦效果 */
    input:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      outline: none;
    }

    /* 输入框错误状态 */
    input.error {
      border-color: #e74c3c;
    }

    /* 验证码按钮 */
    .get-verify-code {
      padding: 13px 20px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      /* 按钮过渡效果 */
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    /* 验证码按钮悬停效果 */
    .get-verify-code:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
    }

    /* 验证码按钮禁用状态 */
    .get-verify-code:disabled {
      background-color: #bdc3c7;
      cursor: not-allowed;
      transform: none;
    }

    /* 登录按钮 */
    .login-btn {
      width: 100%;
      padding: 14px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 500;
      /* 按钮过渡效果 */
      transition: all 0.3s ease;
    }

    /* 登录按钮悬停效果 */
    .login-btn:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    /* 登录按钮点击效果 */
    .login-btn:active {
      transform: translateY(0);
    }

    /* 注册链接 */
    .register-link {
      text-align: center;
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }

    a {
      color: #3498db;
      text-decoration: none;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    a:hover {
      color: #2980b9;
      text-decoration: underline;
    }

    /* 第三方登录区域 */
    .third-party-login {
      margin: 30px 0 15px;
      text-align: center;
    }

    /* 分隔线 */
    .divider {
      display: flex;
      align-items: center;
      margin: 25px 0;
    }

    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: #eee;
    }

    .divider span {
      padding: 0 15px;
      color: #999;
      font-size: 13px;
    }

    /* 第三方登录按钮容器 */
    .social-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 15px;
    }

    /* QQ和微信登录按钮 */
    .social-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* QQ登录按钮 */
    .qq-login {
      background-color: #12b7f5;
    }

    /* 微信登录按钮 */
    .wechat-login {
      background-color: #07c160;
    }

    /* 第三方按钮悬停效果 */
    .social-btn:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    /* 返回按钮 */
    .back-btn {
      position: absolute;
      top: 30px;
      left: 30px;
      padding: 8px 15px;
      background-color: rgba(255, 255, 255, 0.9);
      color: #333;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      text-decoration: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .back-btn:hover {
      background-color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      color: #3498db;
      text-decoration: none;
    }

    /* 响应式设计 - 适配移动设备 */
    @media (max-width: 768px) {
      .login-container {
        flex-direction: column;
        max-width: 100%;
      }
      
      .spongebob-image {
        height: 200px;
      }
      
      .login-box {
        max-width: 100%;
        padding: 35px 25px;
      }
      
      .form-group.verify-group {
        flex-direction: column;
      }
      
      .get-verify-code {
        width: 100%;
      }
    }